<template>
    <div class="rightAreaStyle"  >
<!--        上部分的展示区域-->
        <el-card class="rightVerseCard" shadow="hover" >
            <div slot="header" class="clearfix">
                <span>文嘉《明日歌》</span>
            </div>
            <div style="font-size: 18px;text-align: center; margin-top: 35px;">
                明日复明日
            </div>
            <div style="font-size: 18px;text-align: center;">明日何其多</div>
            <div style="font-size: 18px;text-align: center;">我生待明日</div>
            <div style="font-size: 18px;text-align: center;">万事成蹉跎</div>
            <div style="margin-top: 35px;"></div>
            <el-statistic
                    ref="statistic"
                    @finish="hilarity"
                    format="HH:mm:ss"
                    :value="deadline4"
                    title="距离明日："
                    time-indices></el-statistic>
        </el-card>

<!--        评论按钮-->
        <div v-if="blogId!=null" class="commentIconArea" @click="showCommentDraw" >
            <div class="commentIcon">
                <i class="el-icon-s-comment"></i>
            </div>
        </div>

<!--        评论抽屉-->
        <el-drawer
                :modal-append-to-body="false"
                :append-to-body="true"
                :visible.sync="showDrawStatus">
            <template v-slot:title>
                <div>评论{{commentNum}}</div>
            </template>

<!--            评论区域-->
            <div class="commentArea">
                <el-row >
                    <el-col :span="3">
<!--                        头像-->
                        <div style="display: flex;align-items: start;justify-content: center;height: 100%;">
                            <el-avatar v-if="avatarUrl" :src="avatarUrl" class="avatar"></el-avatar>
                            <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
                        </div>
                    </el-col>
                    <el-col :span="21">
<!--                        输入评论-->
                        <div style="height: 100%;width: 100%">
                            <el-input
                                    type="textarea"
                                    :rows="7"
                                    placeholder="请输入评论"
                                    resize="none"
                                    maxlength="500"
                                    minlength="1"
                                    show-word-limit
                                    v-model="inputCommentContent">
                            </el-input>
                        </div>

                    </el-col>
                </el-row>
                <el-row >
                    <el-col :span="24">
                        <div style="width: 100%;height: 100%;text-align: right">
                            <el-button type="danger" round style="margin: 10px 0 0 0;" @click="commitComment">评论</el-button>
                        </div>

                    </el-col>
                </el-row>


            </div>

<!--            展示评论区域-->
            <div class="showCommentArea">
<!--                评论区域-->
                <el-row v-for="(comment,index) in comments" :key="index" style="margin-bottom: 20px">
                    <el-col :span="3" style="margin-bottom: 5px">
<!--                         头像-->
                        <div style="display: flex;align-items: start;justify-content: center;height: 100%;">
                            <el-avatar v-if="comment.userAvatarUrl" :src="comment.userAvatarUrl" class="avatar"></el-avatar>
                            <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
                        </div>
                    </el-col>
                    <el-col :span="21" style="margin-bottom: 5px;z-index: 2;position: relative;">
<!--                        展示评论-->
                        <div style="width: 100%;margin-bottom: 5px">
<!--                            用户nickname，评论时间-->
                            <div style="width: 100%;display: flex;flex-direction: row;font-size: 14px;color: #777888;">
                                <span style="margin: 0 10px 0 0;">{{comment.userNickname}}</span>
                                <span>{{comment.createTime | dateFormatFun(2)}}</span>
                                <div class="replyIconArea">
                                    <div class="replyIconStyle">
                                        <i class="el-icon-thumb"></i>
                                    </div>
                                    <div class="replyIconStyle" @click="replyRCommentView(index)">
                                        <i class="el-icon-chat-square"></i>
                                    </div>
                                </div>
                            </div>
<!--                             评论内容-->
                            <div style="width: 100%;margin-top: 10px">
                                <div style="width: 100%;text-align: left">
                                    <span>{{comment.content}}</span>
                                </div>
                            </div>
<!--                            回复输入框-->
                            <div v-show="replyInputStatus[index]"  style="margin-top: 5px; ">
                                <div style="width: 100%">
                                    <el-input
                                            ref="myReplyInput"
                                            type="textarea"
                                            :rows="5"
                                            :placeholder="'回复:'+comment.userNickname"
                                            resize="none"
                                            maxlength="500"
                                            minlength="1"
                                            show-word-limit

                                            v-model="inputReplyContent[index]">
                                    </el-input>
                                </div>
                                <div style="width: 100%;text-align: right;margin-top: 3px">
                                    <el-button type="success" icon="el-icon-check"
                                               circle size="mini"
                                               @click="clickFirstReplyButton(index,comment.id)"></el-button>
                                </div>
                            </div>


                        </div>
                    </el-col>
<!--                    回复区域-->
                    <el-row v-for="(childComment,childIndex) in comment.childComments" :key="childIndex" >
<!--                        头像-->
                        <el-col :span="4" style="margin-bottom: 5px">
                            <div style="display: flex;align-items: start;justify-content: right;height: 100%;">
                                <el-avatar v-if="childComment.userAvatarUrl" :src="childComment.userAvatarUrl" class="avatar"></el-avatar>
                                <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
                            </div>
                        </el-col>
                        <el-col :span="20" style="margin-bottom: 5px;padding-left: 5px">
<!--                                展示评论-->
                            <div style="width: 100%;margin-bottom: 5px">
<!--                                    用户nickname，评论时间-->
                                <div style="width: 100%;display: flex;flex-direction: row;font-size: 14px;color: #777888;">
                                    <span style="margin: 0 10px 0 0;">{{childComment.userNickname}}</span>
                                    <span style="margin: 0 10px 0 0;">回复</span>
                                    <span style="margin: 0 10px 0 0;">{{childComment.pNickname}}</span>
                                    <span>{{childComment.createTime | dateFormatFun(2)}}</span>
                                    <div class="replyIconArea" style="flex: 1">
                                        <div class="replyIconStyle">
                                            <i class="el-icon-thumb"></i>
                                        </div>
                                        <div class="replyIconStyle" @click="replyNotRCommentView(index,childIndex)">
                                            <i class="el-icon-chat-square"></i>
                                        </div>
                                    </div>
                                </div>
<!--                                    评论内容-->
                                <div style="width: 100%;margin-top: 10px">
                                    <div style="width: 100%;text-align: left">
                                        <span>{{childComment.content}}</span>
                                    </div>
                                </div>
<!--                                    回复输入框-->
                                <div v-show="comment.replyInputStatus[childIndex]"  style="margin-top: 5px; ">
                                    <div style="width: 100%">
                                        <el-input
                                                ref="myReplyInput"
                                                type="textarea"
                                                :rows="5"
                                                :placeholder="'回复:'+comment.userNickname"
                                                resize="none"
                                                maxlength="500"
                                                minlength="1"
                                                show-word-limit

                                                v-model="comment.inputReplyContent[childIndex]">
                                        </el-input>
                                    </div>
                                    <div style="width: 100%;text-align: right;margin-top: 3px">
                                        <el-button type="success" icon="el-icon-check"
                                                   circle size="mini"
                                                   @click="clickSecondReplyButton(index,childIndex,childComment.id,childComment.rId)"></el-button>
                                    </div>
                                </div>


                            </div>
                        </el-col>
                    </el-row>


            </el-row>

            </div>


        </el-drawer>

    </div>
</template>

<script>
    export default {
        name: "FrontFrameRightArea",
        props:{

        },
        data(){
            return{
                deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()),
                stop: true,
                showDrawStatus:false,   //评论抽屉的状态
                commentNum:0,           //评论数目
                comments:[],            //评论
                avatarUrl:(JSON.parse(localStorage.getItem("user")))?
                    JSON.parse(localStorage.getItem("user")).avatarUrl:null,    //用户头像的url
                userId:(JSON.parse(localStorage.getItem("user")))?
                    JSON.parse(localStorage.getItem("user")).id:null,    //用户id
                inputCommentContent:"", //输入的评论内容
                blogId: (this.$route.query.id)?this.$route.query.id:null , //当前博客的id
                currentCommentId:Number,    //当前评论回复的id
                inputReplyContent:[],   //每个根评论回复框的内容
                replyInputStatus:[],    //每个根评论回复框的状态，是否展示(true/false)
            }
        },
        created() {
            this.checkBlogView();
        },
        methods: {
            //检测路由中是否存在id值(是否是blog展示界面)
            checkBlogView(){
                this.blogId=(this.$route.query.id)?this.$route.query.id:null;
                if (this.blogId!=null){
                    this.reloadComments();
                }
            },
            //计时结束
            hilarity() {
                this.$notify({
                    title: "提示",
                    message: "时间已到",
                    duration: 0,
                });
            },
            //增加事件
            add() {
                this.deadline3 = this.deadline3 + 1000 * 10;
            },
            //展示评论抽屉
            showCommentDraw(){
                this.showDrawStatus=true;
            },
            //加载界面
            reloadComments(){
                this.request.get("/index/comment/queryComments",{
                    params:{
                        blogId: this.blogId,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.commentNum=res.data.length;
                        this.comments=res.data;
                        //对每个根comment增加一个子replyInputStatus状态和输入框
                        this.comments.forEach(res=>{
                            this.$set(res, "replyInputStatus", new Array(res.childComments.length).fill(false));
                            this.$set(res, "inputReplyContent", new Array(res.childComments.length).fill(""));
                        })
                        this.replyInputStatus=new Array(this.commentNum).fill(false);
                        this.inputReplyContent=new Array(this.commentNum).fill("");
                    }
                })

            },
            //提交评论
            commitComment(){
                if (this.inputCommentContent!=""){
                    this.request.get("/index/comment/commitComment",{
                        params:{
                            blogId: this.blogId,
                            userId: this.userId,
                            content: this.inputCommentContent,
                        }
                    }).then(res=>{
                        if (res.code=="200"){
                            this.$message({
                                message: "提交评论成功",
                                type: 'success'
                            });
                            this.reloadComments();
                        }
                    })
                }else{
                    this.$message({
                        message: "评论内容不能为空,请重新输入",
                        type: 'error'
                    });
                }


            },
            //打开回复评论的输入框(根)
            replyRCommentView(index){
                this.$set(this.replyInputStatus, index, !this.replyInputStatus[index]);
            },
            //打开子回复评论的输入框(子)
            replyNotRCommentView(index,childIndex){
                this.$set(this.comments[index].replyInputStatus, childIndex, !this.comments[index].replyInputStatus[childIndex]);
                console.log(this.comments[index].replyInputStatus);
            },
            //对回复进行第一次评论
            clickFirstReplyButton(index,pId){
                let comment={};
                comment.content=this.inputReplyContent[index];
                comment.blogId=this.blogId;
                comment.pId=pId;
                comment.rId=pId;
                comment.userId=this.userId;
                this.request.post("/index/comment/commitFirstReply",comment).then(res=>{
                    if (res.code=="200"){
                        this.$message({
                            message: "提交评论成功",
                            type: 'success'
                        });
                        this.reloadComments();
                    }else{
                        this.$message({
                            message: "提交评论失败",
                            type: 'error'
                        });
                    }
                })




            },
            //对回复进行第二次评论
            clickSecondReplyButton(index,childIndex,pId,rId){
                let comment={};
                comment.content=this.comments[index].inputReplyContent[childIndex];
                comment.blogId=this.blogId;
                comment.pId=pId;
                comment.rId=rId;
                comment.userId=this.userId;
                this.request.post("/index/comment/commitFirstReply",comment).then(res=>{
                    if (res.code=="200"){
                        this.$message({
                            message: "提交评论成功",
                            type: 'success'
                        });
                        this.reloadComments();
                    }else{
                        this.$message({
                            message: "提交评论失败",
                            type: 'error'
                        });
                    }
                })




            }

        },

    }
</script>

<style scoped>

    .commentArea{
        width: 100%;
        height: 250px;
        padding:20px 20px 0px 20px;
    }

    .showCommentArea{
        width: 100%;
        height: calc(100% - 250px);
        padding:20px 20px;
    }

    .replyIconArea{
        display: inline-block;
        width: calc(100% - 164px);
        height: 16px;
        line-height: 16px;
        text-align: right;
    }

    .replyIconStyle{
        display: inline-block;
        height: 100%;
        margin-right: 10px;
        font-size: 16px;
        cursor: pointer;
        pointer-events: auto;
    }

    .rightVerseCard{
        width: calc(100% - 20px);
        padding:0px 10px;
        border-left: 0px;
        border-right: 0px
    }

    .rightAreaStyle{
        width: 300px;
        background: rgba(215, 234, 216, 0.69);
        padding: 5px;
        height: 307.5px;
        position: fixed;
    }

    .commentIconArea{
        height: 40px;
        width: 40px;
        position: fixed;
        right: 200px;
        bottom: 100px;
        background-color: #FFF;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        box-shadow: 0 0 6px rgba(0,0,0,.12);
        cursor: pointer;
        z-index: 5;
    }

    .commentIcon{
        height: 40px;
        width: 40px;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0,0,0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
        font-size: 34px;
    }

    /deep/.el-textarea__inner {
        display: block;
        resize: vertical;
        padding: 5px 15px;
        line-height: 1.5;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        color: #606266;
        border: 1px solid #DCDFE6;
        border-radius: 4px;
        transition: border-color .2s cubic-bezier(.645,.045,.355,1);
        border-radius: 8px;
        background: rgba(248,249,251,0.8);
    }

    /deep/.el-drawer__header {
        align-items: center;
        color: #72767b;
        display: flex;
        margin-bottom: 5px;
        padding: 20px 20px;
        border-bottom: 1px solid #8080805e;
    }


</style>